<template>
  <el-table-column
    :prop="prop"
    :label="label"
    :header-align="headerAlign"
    :align="align"
    :width="width"
    :min-width="minWidth"
    :class-name="className"
  >
    <template #default="scope">
      <!-- 防御性判断：确保数据是数组且至少有一个元素 -->
      <el-image
        v-if="isValidImageList(scope.row[prop])"
        style="height: 25px"
        preview-teleported
        :src="getFirstImageUrl(scope.row[prop])"
        :preview-src-list="getImageUrls(scope.row[prop])"
      />
      <span v-else>无图片</span>
    </template>
  </el-table-column>
</template>

<script setup lang="ts" name="SmImageColumn">
import { defineProps } from 'vue';

interface ImageItem {
  url?: string; // 允许 url 字段不存在
}

const props = defineProps<{
  prop: string;
  label: string;
  headerAlign?: string;
  align?: string;
  width?: string;
  minWidth?: string;
  className?: string;
}>();

// 检查是否是有效图片数组
const isValidImageList = (images: unknown): boolean => {
  return Array.isArray(images) && 
         images.length > 0 && 
         images.every(item => item?.url); // 确保每个元素都有 url
};

// 获取第一个有效图片 URL（带默认值）
const getFirstImageUrl = (images: unknown): string => {
  if (!isValidImageList(images)) return '';
  return (images as ImageItem[])[0]?.url || '';
};

// 安全转换图片 URL 列表
const getImageUrls = (images: unknown): string[] => {
  if (!isValidImageList(images)) return [];
  return (images as ImageItem[]).map(item => item.url!).filter(Boolean); // 过滤无效 URL
};
</script>